<template>
	<div class="index-container indexpage">
		<mt-header fixed title ="长沙交通行政执法"></mt-header>
		<mt-swipe :auto="4000">
            <mt-swipe-item><div class="banner1 banner">
            <img src="../assets/banner1.png"/>
            </div></mt-swipe-item>
            <!-- <mt-swipe-item><div class="banner2 banner">
            	<img src="../assets/banner1.png"/>
            </div></mt-swipe-item> -->
        </mt-swipe>
        <div>
        	<ul class="icon-list">
	            <li class="icon">
	            	<router-link to="/indroduce"></router-link>
	                <img src="../assets/color44.png" class="clear">
	                <h4>办事指南</h4>
	                <p>办事指南介绍介绍</p>
	                <i></i>
	            </li>
	            <li class="icon">
	                <img src="../assets/color11.png" class="clear">
	                <h4>举报投诉</h4>
	                <p>文字文字举报投诉</p>
	                <i></i>
	            </li>
	            <li class="icon">
	                <img src="../assets/color33.png" class="clear">
	                <h4>案件查询</h4>
	                <p>办事指南介绍介绍</p>
	                <i></i>
	            </li>
	            <li class="icon">
	                <img src="../assets/color22.png" class="clear">
	                <h4>相关什么</h4>
	                <p>办事指南介绍介绍{{author}}</p>
	                <i></i>
	            </li>                   
         	</ul>
        </div>
        <input type="text" v-model="inputname" name=""><button @click="setauthor" type="button">setAuthor</button>
        <br/>
        <br/>
        <button @click="$store.commit('add',1)">&nbsp;+&nbsp;</button><span>{{count}}</span>
		<footerGuide></footerGuide> 
	</div>
</template>
<script>
	import { Swipe, SwipeItem } from 'mint-ui';
	import footerGuide from '@/components/common/footer.vue';
	import {mapState,mapMutations} from 'vuex'
	export default {
	  data () {
	    return {
	      inputname:''
	    }
	  },
	  components:{footerGuide},
	  methods:{
	    setauthor(){
	    	this.$store.state.author=this.inputname;
	    }
	  },
	  computed:{
	  	author(){
	  		return this.$store.state.author
	  	},
	  	// ...mapState(["author"]),
	  	...mapState(["count"]),//使用es6的展开运算符
	  	count(){
	  		return this.$store.getters.count;
	  	}
	  }
	}
</script>
<style lang="less" scoped>
*{margin: 0;padding: 0;}
.index-container{
        position: absolute;
        top: 40px;
        height: 100%;
        width:100%;
    }
.indexpage{
    .mint-swipe {
    width: 100%;
    height: 200px;
    color: #fff;
    font-size: 30px;
    text-align: center;
    overflow: hidden;
    .banner{
    	img{
    		width: 100%;
    	}
    }
   }
}
	.icon-list{
        margin-top: 10px;
        height: 54%;
        overflow-y: scroll;
	    img{
	        width: 55px;
	        height: 55px;
	        float: left;
	    }
	    .icon{
	        height: 70px;
	        width: 100%;
	        padding: 0 20px 10px 20px;
	        position: relative;
	        display: inline-block;
	        border-bottom: 1px solid #efefef;
	        box-sizing: border-box;
	        a{
	        	position: absolute;
	        	width: 100%;
	        	height: 100%;
	        	display: inline-block;
	        	left: 0;top: 0;
	        }
		    h4{
		        position: absolute;
		        left: 88px;
		        top: 10px;
		    }
		    p{
		        position: absolute;
		        left:88px;
		        bottom: 15px;
		        color: #c1c1c1;
		    }
		    i{
		        border: 2px solid #c8c8cd;
		        border-bottom-width: 0;
		        border-left-width: 0;
		        content: " ";
		        top: 50%;
		        right: 20px;
		        position: absolute;
		        width: 5px;
		        height: 5px;
		        -webkit-transform: translateY(-50%) rotate(45deg);
		        transform: translateY(-50%) rotate(45deg);
		    }
		}    
    }    
</style>
